<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	
<head>
	<title></title>
	<meta charset="utf-8"  />
		<script type="text/javascript">
			function $$(id) {
				return document.getElementById(id);
			}
			window.onload=function(){
				var cnv = $$("canvas");
				var cxt = cnv.getContext("2d");
				createPolygon(50,50,5,40,cxt);
				
				function createPolygon(dx,dy,n,size,cxt){
					cxt.beginPath();
					for(var i =0;i<n;i++){
						var x=size*Math.cos(i*2*Math.PI/n)+dx;
						var y=size*Math.sin(i*2*Math.PI/n)+dy;
						cxt.lineTo(x,y);
					}
					cxt.fillStyle="red";
						cxt.fill();
						cxt.closePath();
				}
				cnv.addEventListener("mousedown",downfun);
				function downfun(e) {
					var x=e.clientX;
					var y=e.clientY;
					if(cxt.isPointInPath(x,y)) {
						cnv.addEventListener("mousemove",movefun);
					}
					cnv.addEventListener("mouseup",upfun)
				}
				function movefun(e) {
				movex=e.clientX;
				movey=e.clientY;
				cxt.clearRect(0,0,cnv.width,cnv.height);
				createPolygon(movex,movey,5,40,cxt);
				}
				function upfun(e) {
					cnv.removeEventListener("mousemove",movefun);
				}
			}
		</script>
	</head>
	<body>
		<canvas id="canvas" width="400" height="300" style="border:1px solid silver;"></canvas>
	</body>
</html>
